<template>
  <div class="editor-container">
    <div class="updateEditor_main">
          <div class="updateEditor">
      <el-button type="success" @click="submit" icon="el-icon-check" circle></el-button>
    </div>
      <json-editor ref="jsonEditor" v-model="value"></json-editor>
    </div>
  </div>
</template>
<script>
import JsonEditor from "@/components/JsonEditor";
import { update } from "@/api/dict";

export default {
  components: { JsonEditor },
  data() {
    return {
      value: {}
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.$store.dispatch("GetOptions").then(res => {
        this.value = res.data;
      });
    },
    submit() {
      let data = JSON.parse(this.value);
      this.$store.dispatch("UpdateOptions", { data }).then(res => {
        this.fetchData();
        this.$notify({
          title: "成功",
          message: "更新成功",
          type: "success",
          duration: 2000
        });
      });
    }
  }
};
</script>
<style scoped>
.updateEditor_main {
  width: calc(100% - 40px);
  margin-left: 20px;
  height: calc(100vh - 150px);
  overflow-y: scroll;
  overflow-x: hidden;
  margin-top: 20px;
}
.updateEditor {
  position: absolute;
  right: 60px;
  top: 10px;
  height: 60px;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.editor-container {
  position: relative;
  height: 100%;
}
</style>

